<template>
  <div class="L_demo">
    <el-container class="Dtl">
      <el-aside width="35%" style="margin: 10% 10%">
        <img :src="myImage(a[0].imageUrl)" alt="">
      </el-aside>
      <el-container>
        <el-header><h2>{{a[0].brandName}}-{{a[0].productName}}</h2></el-header>
        <el-main>
          <div @keyup="getSummaries">
            <p class="Describe">{{a[0].productDescribe}}</p>
            <p class="UTPS"><span>单价：<a style="color: red">￥{{a[0].productPrice}}</a></span></p>
            <p class="size"><span>商品规格：<a>{{a[0].scfcName}}</a></span></p>
            <p @click="getSummaries">
              <template>
                数量：
                <el-input-number v-model="a[0].productNum" :step="1" size="small" :min="1" :max="a[0].productRepertory" @change="getSummaries"></el-input-number>
              </template>
            </p>
            <p>库存(套)：{{a[0].productRepertory}}</p>
            <p class="zongjia">总价(￥)：{{a[0].payMoney}}元</p>
          </div>
        </el-main>
        <el-footer>
          <el-button type="warning" @click="buy">立即购买</el-button>
          <el-button type="danger" @click="addChart">加入购物车</el-button>
        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'deTails',
  data () {
    return {
      a: []
    }
  },
  methods: {
    open (message, type) {
      this.$message({
        message: message,
        type: type
      })
    },
    addChart () { //
      let dealerId = this.$store.getters.getCompany.dealerId
      console.log('dealerId')
      console.log(dealerId)
      for (let i = 0; i < this.a.length; i++) {
        this.a[i].dealerId = dealerId
      }
      console.log('加入购物车')
      console.log(this.a)
      this.$axios.post('shoppingCart/addShoppingCart', this.a)
        .then((response) => {
          console.log(response)
          if (response.data.code === 200) {
            this.open('加入成功！即将去往购物车。。。', 'success')
            this.$router.push({
              path: '/shoppingCar',
              query: {
                item: this.a
              }
            })
          } else {
            this.open('失败！', 'warning')
          }
        })
        .catch((error) => {
          this.open('加入购物车失败！', 'warning')
          this.$router.push({ path: '/home' })
          console.log(error)
        })
    },
    buy () { //  订单生成路由
      this.$router.push({
        path: '/createOrder',
        query: {
          item: this.a
        }
      })
    },
    getSummaries () { //  获取总价格
      for (let i = 0; i < this.a.length; i++) {
        this.a[i].payMoney = this.a[i].productNum * this.a[i].productPrice
        var tempObj = this.a[i]
        this.$set(this.a, i, tempObj)
      }
    },
    getData: function () { //  上个路由获取商品信息
      this.a = [this.$route.query.item]
      for (let i = 0; i < this.a.length; i++) {
        this.a[i].productNum = 1
        this.a[i].payMoney = this.a[i].productPrice
      }
    }
  },
  created () {
    this.getData()
  }
}
</script>

<style scoped>
  p{
    margin-top: 15px;
  }
  element.style{
    height: 20px;
  }
  el-container Dtl{
    height: 40px;
  }
  img{
    margin-left: 50px;
  }

</style>
